<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-12 08:38:02
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 13:14:20
 * @FilePath: /amap-web-vr/src/components/vr-detail-dialog/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-12 08:38:02
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-06-30 14:07:12
 * @FilePath: /amap-web-vr/src/components/vr-detail-dialog/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <vc-web-url-dialog :url="url" @tap="emits('tap')">
    <template #header>
      <div class="vr-header">
        <div class="title">{{ model?.name }}</div>
        <img
          class="img"
          src="@/assets/images/ic_vr_collect.png"
          v-if="model ? model.is_collect : false"
          @click="setVrCollectData"
        />
        <img
          src="@/assets/images/ic_vr_collect_sel.png"
          v-else
          @click="setVrCollectData"
        />
      </div>
    </template>
  </vc-web-url-dialog>
</template>

<script setup lang="ts">
import VcWebUrlDialog from "../vc-dialog/vc-web-url-dialog.vue";
import { ref, defineEmits, watch, computed } from "vue";
import { getVrInfo, setVrCollect } from "@/api/vr";
// import { decryptData } from "@/utils/utils";
import type { ZFVrModel } from "../type";
import { ElMessage } from "element-plus";
const model = ref<ZFVrModel>();

const emits = defineEmits(["tap"]);
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});

const setVrCollectData = async () => {
  var res = (await setVrCollect(model.value!.id)) as any;
  console.log("setVrCollect------", res);
  if (res.code == 200) {
    ElMessage.success(model.value!.is_collect ? "取消收藏成功" : "收藏成功");
    model.value!.is_collect = !model.value!.is_collect;
  }
};

const onLoadData = async (id: string) => {
  var res = (await getVrInfo(id)) as any;

  if (res.code == 200) {
    // model.value = decryptData(res.data);
    console.log("--getVrInfo---", model.value);
  }
};
const url = computed(() => {
  if (model.value == null) {
    return "";
  }
  if (model.value.type == 0 || model.value!.type == 2) {
    return model.value!.h5_url == ""
      ? model.value!.vr_url
      : model.value!.h5_url;
  }
  return model.value!.h5_url == "" ? model.value!.vr_url : model.value!.h5_url;
});

watch(
  () => props.id,
  (newVal) => {
    if (newVal) {
      onLoadData(newVal);
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.vr-header {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-right: 10px;
  }
  img {
    width: 24px;
    height: 24px;
  }
}

</style>
